<template>
    <div class="project-report-view">

      <div class="screen-view">

        <el-form
          ref="queryForm"
          :model="screenData"
          :inline="true"
          label-width="68px"
        >

          <el-form-item label="报告类型">
            <el-select
              v-model="screenData.report_type"
              placeholder="请选择类型"
              size="small"
              @change="typeChange"
            >
              <el-option label="周报" value="week"/>
              <el-option label="月报" value="month"/>
            </el-select>
          </el-form-item>

          <el-form-item label="选择周" v-if="screenData.report_type == 'week'">
            <el-date-picker
              v-model="screenData.week"
              type="week"
              format="yyyy 第 WW 周"
              @change="weekChange"
              placeholder="选择周">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="选择月" v-else>
            <el-date-picker
              v-model="screenData.month"
              type="month"
              @change="monthChange"
              placeholder="选择月">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="选择人员" v-if="isTab">
            <el-select v-model="screenData.creator_id" placeholder="请选择" @change="memberChange">
              <el-option
                v-for="item in members"
                :key="item.member_id"
                :label="item.member_name"
                :value="item.member_id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>

            <!--            <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>-->
            <el-button plain icon="el-icon-refresh" size="small" v-if="isTab" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

<!--        <el-button-->
<!--          type="primary"-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          @click="cutClick">{{isTab?'切换内容模式':'切换列表模式'}}</el-button>-->
      </div>


      <div v-if="isTab">
        <el-table
          size="medium"
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            align="center"
            prop="report_type"
            label="报告类型"
            width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.report_type == 'week'">周报</span>
              <span v-else>月报</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="report_period"
            label="报告周期"
            width="150">
            <template slot-scope="scope">
              <span>{{dealPeriod(scope.row)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="creator_name"
            label="报告职员"
            width="300">
          </el-table-column>
          <el-table-column
            align="center"
            label="报告时间"
            width="150">
            <template slot-scope="scope">
              <span>{{scope.row.created_at?dateFormat1('yyyy-mm-dd',scope.row.created_at) : ''}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            width="150">
            <template slot-scope="scope">
              <el-button class="text-btn-green" size="medium" type="text" v-if="checkComment(scope.row)" @click="commentClick(scope.row.id)">评论</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-else>



        <el-tabs tab-position="left" v-model="activeName" @tab-click="tabChange">
          <el-tab-pane v-for="item in tableData" :label="item.creator_name" :key="item.id" :name="item.id">

            <div class="details-view">

              <el-card shadow="never">

                <div slot="header" class="clearfix">
                  <span>基本信息</span>
                  <el-button style="float: right; padding: 3px 0" type="text" @click="confirm" v-if="details.isComment">评论</el-button>
                </div>
                <el-form ref="form" :model="details" label-width="150px">
<!--                  <el-row style="display: flex">-->
<!--                    <el-form-item label="报告人员">-->
<!--                      <span>{{details.creator_name}}</span>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="报告类型">-->
<!--                      <span v-if="details.report_type == 'week'">周报</span>-->
<!--                      <span v-else>月报</span>-->
<!--                    </el-form-item>-->

<!--                    <el-form-item label="报告周期" v-if="details.report_type == 'week'">-->
<!--                      <span>{{dealPeriod(details)}}</span>-->
<!--                    </el-form-item>-->

<!--                    <el-form-item label="报告月" v-else>-->
<!--                      <span>{{dealPeriod(details)}}</span>-->
<!--                    </el-form-item>-->

<!--                    <el-form-item label="所属项目">-->
<!--                      <span>{{details.project_name}}</span>-->
<!--                    </el-form-item>-->
<!--                  </el-row>-->

                  <el-form-item label="本周项目任务" v-if="details.report_type == 'week'">


                    <el-table
                      v-if="details.tasks.length"
                      :data="details.tasks"
                      border
                      style="width: calc( 100% - 1px )">
                      <el-table-column
                        prop="task_name"
                        align="center"
                        label="任务名称">
                      </el-table-column>
                      <el-table-column
                        prop="status"
                        align="center"
                        label="任务状态"
                        width="200">
                        <template slot-scope="scope">
                          <span v-if="scope.row.status == 1">进行中</span>
                          <span v-else-if="scope.row.status == 6">已完成</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="任务进度"
                        align="center"
                        width="150">
                        <template slot-scope="scope">
                          <span>{{scope.row.task_progress}}%</span>
                        </template>
                      </el-table-column>
                    </el-table>

                  </el-form-item>

                  <el-form-item :label="details.report_type == 'week' ? '本周工作计划' : '本月工作计划'">

                    <span>{{details.plan}}</span>

                  </el-form-item>

                  <el-form-item :label="details.report_type == 'week' ? '本周工作总结' : '本月工作总结'">

                    <span>{{details.summary}}</span>

                  </el-form-item>

                  <el-form-item label="存在问题">

                    <span>{{details.problem}}</span>

                  </el-form-item>

                  <el-form-item label="需协调和帮助">

                    <span>{{details.help}}</span>

                  </el-form-item>

                  <el-form-item :label="details.report_type == 'week' ? '下周工作计划' : '下月工作计划'">

                    <span>{{details.next_plan}}</span>

                  </el-form-item>

                  <el-form-item label="附件">
                    <file-preview :file-list="details.files? details.files : []" />
                  </el-form-item>

                </el-form>
              </el-card>

              <el-card class="box-card" v-if="details.comment && details.comment.length" style="margin-top: 10px">

                <div slot="header" class="clearfix">
                  <span>评论</span>
                </div>
                <div class="report-item" v-for="(item,index) in details.comment">
                  <div class="item-left">
                    <el-avatar shape="square" :size="50" :src="squareUrl">{{item.creator_name}}</el-avatar>
                  </div>

                  <div class="item-right">

                    <div class="item-right-top">

                      <span class="name">{{item.creator_name}}</span>
                      <span class="date">{{item.created_at}}</span>

                    </div>

                    <div class="item-right-content">
                      <span>{{item.info}}</span>
                    </div>

                  </div>

                </div>

              </el-card>
            </div>

          </el-tab-pane>
        </el-tabs>



      </div>

      <el-dialog
        v-if="dialogVisible"
        title="发表评论"
        :visible.sync="dialogVisible"
        width="600px"
        append-to-body
        :before-close="dialogClose">

        <div class="comment-view" style="display: flex">

          <span class="title" style="min-width: max-content;margin-right: 10px">评论内容</span>

          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea">
          </el-input>

        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogConfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "reportView",
        props:{
            datas:{
                type:Object,
                default:function () {
                    return{}
                }
            }
        },
        data:function () {
            return{
                activeName:'',
                squareUrl:'',
                isTab:false,
                total:0,
                pageSize:10,
                pageNum:1,
                tableData:[],
                screenData:{
                    i_create:0,
                    project_id:0,
                    report_type:'week',
                    period:'',
                    creator_id:'',
                    week:'',
                    month:'',
                    pager:{
                        limit:10,
                        skip:1,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                },
                members:[],

                comment_id:0,
                dialogVisible:false,
                textarea:'',
                details:{},
                detail_id:0,
            }
        },
        mounted:function(){

        },
        methods:{
            getData:function(){
                if (!this.tableData.length){
                    this.screenData.project_id = this.datas.id
                    // this.getReportData();
                }
                if (!this.members.length){
                    this.members = [...this.datas.member]
                }
            },
            tabChange:function(item){
                console.log(item)
                let data = this.tableData[item.index]
                this.getDetailData(data.id);
            },
            getDetailData:function(id){
                this.$api.PROJECT_START_WORK_REPORT_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.details = res.data;
                        this.details.isComment = this.checkComment(this.details)
                    }
                }).catch(err=>{})
            },
            getReportData:function(){
                this.tableData = [];
                this.details = {}
                this.$api.PROJECT_START_WORK_REPORT_LIST(this.screenData).then(res=>{
                    if (res.code == 200){
                        this.tableData = res.data.data;
                        if (this.tableData.length){
                            this.activeName = this.tableData[0].id
                            this.getDetailData(this.tableData[0].id);
                        }
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            dealPeriod:function (row) {
                let period = ""
                let date = new Date(row.period.replace(/-/g,'/'))

                let str = date.getFullYear()
                if (row.report_type == 'week'){

                    let date2 = new Date(str.replace(/-/g,'/')+ "-01-01 00:00:00")

                    let timer = date.getTime() - date2.getTime()
                    let a = 60*60*24*7*1000
                    let b =  Math.floor(timer/a);
                    if (date2.getDay() != 0){
                        b++;
                    }
                    period = str + "第" + b + "周"
                }else {
                    period = str + (date.getMonth() + 1) + "月"
                }

                return  period
            },
            //取当前日期星期一
            getMonday:function(){
                let date = new Date()

                let day = date.getDay();
                if (date.getDay() == 0){
                    day = 6;
                }else {
                    day = date.getDay() - 1;
                }
                let a = 60*60*24*1000*day;
                let timer = date.getTime() - a

                let date2 = new Date(timer)

                return this.dealDateStr(date2)
            },
            //取当前日期月
            getMonthStr:function(){
                let date = new Date()

                let year = date.getFullYear()

                let month = date.getMonth() + 1
                if (month < 10){
                    month = "0" + month
                }

                let str = year + "-" + month + "-01"
                //let date2 = new Date(str)

                return str
            },
            checkComment:function(data){
                let index = data.member_id.findIndex(id=>id==this.$store.getters.userInfo.user.id)
                if (index != -1){
                    if (data.comment){
                        let ind = data.comment.findIndex(a=>a.creator_id == this.$store.getters.userInfo.user.id)
                        if (ind != -1){
                            return false
                        }else{
                            return true
                        }
                    }else {
                        return true;
                    }

                }else {
                    return false
                }
            },
            dialogClose:function(){
                this.dialogVisible = false;
            },
            confirm:function(){
                this.comment_id = this.details.id;
                this.detail_id = this.details.id;
                this.dialogVisible = true;
            },
            commentClick:function (id) {
                this.comment_id = id
                this.detail_id = 0;
                this.dialogVisible = true;
            },
            dialogConfirm:function () {
                if (!this.textarea){
                    this.$message.error("请输入评论")
                    return
                }
                let data = {
                    report_id:this.comment_id,
                    info:this.textarea
                }
                this.textarea = '';
                this.dialogVisible = false;

                this.$api.PROJECT_START_WORK_REPORT_CREATE_COMMENT(data).then(res=>{

                    if (res.code == 200){
                        this.getReportData()
                        if (this.detail_id){
                            this.getDetailData(this.detail_id)
                        }
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            resetQuery:function(){
                this.screenData.pager.skip = 1;
                this.screenData.period = '';
                this.screenData.week = '';
                this.screenData.month = '';
                this.screenData.creator_id = '';
                this.screenData.report_type = "week";
                this.getReportData()
            },
            typeChange:function () {
                this.screenData.pager.skip = 1;
                if (this.screenData.report_type == "week"){
                    this.screenData.period = this.screenData.week ? this.dealDateStr(new Date(this.screenData.week)) + " 00:00:00" : ""
                }else {
                    this.screenData.period = this.screenData.month ? this.dealDateStr(new Date(this.screenData.month)) + " 00:00:00" : ""
                }
                this.getReportData()
            },
            weekChange:function () {
                console.log(this.screenData.week)
                this.screenData.period = this.dealDateStr(new Date(this.screenData.week)) + " 00:00:00";
                this.screenData.pager.skip = 1;
                console.log(this.screenData.period)
                this.getReportData()
            },
            monthChange:function () {
                this.screenData.period = this.dealDateStr(new Date(this.screenData.month)) + " 00:00:00";
                this.screenData.pager.skip = 1;
                this.getReportData()
            },
            memberChange:function () {
                this.screenData.pager.skip = 1;
                this.getReportData()
            },
            dealDateStr:function(date){
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (month < 10){
                    month = "0" + month
                }
                if (day < 10){
                    day = "0" + day;
                }

                return year + "-" + month + "-" + day
            },
            cutClick:function () {
                this.isTab = !this.isTab
                if (!this.isTab && !this.details.id){
                    if (this.tableData.length){
                        this.getDetailData(this.tableData[0].id)
                    }
                }
                if (!this.isTab){
                    this.screenData.month = this.getMonthStr()
                    this.screenData.week = this.getMonday()
                    if (this.screenData.report_type == "week"){
                        this.screenData.period = this.screenData.week + " 00:00:00"
                    }else{
                        this.screenData.period = this.screenData.month + " 00:00:00"
                    }
                    this.getReportData()
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
  @import "@/assets/scss/views/projectManagement/list/details/projectReportView.scss";
</style>
